<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>小米6立即购买-小米商城</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        .version_active {
            border: 1px solid #ff6709 !important;
        }

        .font_color {

            color: red !important;
        }

        .yanse {
            margin-left: 5px;
            font-size: 18px;
            color: #000
        }

        .yuandian {
            display: inline-block;
            height: 15px;
            width: 15px;
            border-radius: 50%;
            margin-left: 80px;
        }

        .product_img {
            width: 560px;
            height: 560px;
        }

    </style>

</head>
<body>
<div style="width: 1226px; margin: 0 auto;">
    <!-- start header -->
	<@common.header/>
    <!--end header -->

    <!-- start banner_x -->
		<@common.banner_x/>
    <!-- end banner_x -->


    <!-- xiangqing -->
    <form action="post" method="">
        <#--<div class="xiangqing">-->
            <#--<div class="neirong w">-->
                <#--<div class="xiaomi6 fl">小米6</div>-->
                <#--<nav class="fr">-->
                    <#--<li><a href="">概述</a></li>-->
                    <#--<li>|</li>-->
                    <#--<li><a href="">变焦双摄</a></li>-->
                    <#--<li>|</li>-->
                    <#--<li><a href="">设计</a></li>-->
                    <#--<li>|</li>-->
                    <#--<li><a href="">参数</a></li>-->
                    <#--<li>|</li>-->
                    <#--<li><a href="">F码通道</a></li>-->
                    <#--<li>|</li>-->
                    <#--<li><a href="">用户评价</a></li>-->
                    <#--<div class="clear"></div>-->
                <#--</nav>-->
                <#--<div class="clear"></div>-->
            <#--</div>-->
        <#--</div>-->

        <div class="jieshao mt20 w">
            <div class="left fl">


                <div id="demo" class="carousel slide" data-ride="carousel">

                    <!-- 指示符 -->
                    <ul id="zhishifu" class="carousel-indicators">
                        <li id="li_active" data-target="#demo" data-slide-to="0" class="active"></li>
                    </ul>

                    <!-- 轮播图片 -->
                    <div id="lunbotu" class="carousel-inner">
                        <div id="lunbotu_active" class="carousel-item active">
                            <img class="product_img" src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
                        </div>

                    </div>

                    <!-- 左右切换按钮 -->
                    <a class="carousel-control-prev" id="demo1" href="#demo" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" id="demo1" href="#demo" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>

                </div>


                <div style="background-color: red"></div>


            </div>
            <div class="right fr">

                <div class="h3 ml20 mt20">${product.secondCategoryName}</div>
                <input type="hidden" id="product_id" value="${product.secondCategoryId}">
                <div class="jianjie mr40 ml20 mt10"></div>
                <div id="productPriceByVersion" class="jiage ml20 mt10"></div>

                <div class="ft20 ml20 mt20">选择版本</div>
                <div id="productVersion" class="xzbb ml20 mt10">
				<#list productVersionList as productVersionList>
				<div class="banben fl">
                    <a>
                        <span id="version_id" style="display: none">${productVersionList.versionId}</span>
                        <span id="version_name">${productVersionList.versionName} </span>
                        <span id="budaiyuan" style="display: none">${productVersionList.versionPrice?c}</span>
                        <span id="product_price">${productVersionList.versionPrice?c} 元</span>
                    </a>
                </div>
                </#list>
                    <div class="clear"></div>
                </div>
                <div class="ft20 ml20 mt20">选择颜色</div>
                <div id="product_color" class="xzbb ml20 mt10">
                </div>
            </div>
            <div class="clear"></div>
            <div style=" float: right; width: 620px; height: 35%; margin-top: -16%; background: rgb(248,248,248); padding-top: 1%;">
                <div class="top1 mt10">
                    <div id="product_detail_name" style="margin-left: 4%; float: left;"></div>
                    <div id="product_detail_color" style="margin-left: 4%; float: left;"></div>
                    <div id="select_price_color" style="float: right; margin-right: 100px; "></div>

                    <div class="clear"></div>
                </div>
                <div id="total_price" class="bot  ftbc"></div>

                <div class="xiadan   mt20">
                    <input class="jrgwc" type="button" name="jrgwc" value="立即选购"/>
                    <input id="addCart" class="jrgwc" type="button" name="jrgwc" value="加入购物车"/>
                </div>
            </div>
        </div>
    </form>
    <!-- footer -->
    <div style="background-color: black; height: 500px">

    </div>
	<@common.footer/>

</div>
<script type="text/javascript" src='/js/jquery-3.3.1.js'></script>
<script type="application/javascript">

    $(document).ready(function () {
        var productId = $("#product_id").val();
        var versionId;
        var version_color_name;
        var productPrice_s;
        var versionNames;
        // 选择版本触发
        $("#productVersion div").click(function () {
            productPrice_s = $(this).find("#budaiyuan").html();
            // 清空颜色展示
            $("#product_detail_color").html('');
            // 清空之前数据
            $("#product_color").empty();
            // 版本号id
            versionId = $(this).find('#version_id').html();
            // 版本名称
            versionNames = $(this).find('#version_name').html();
            // 对应版本价格
            productPrice = $(this).find('#product_price').html();
            // 添加样式
            $(this).addClass("version_active");
            // 去除同胞样式
            $(this).siblings().removeClass("version_active");
            $(this).find("a").addClass("font_color");
            $(this).siblings().find("a").removeClass("font_color");
            // 清空之前的数据
            $("#product_detail_name").html('');
            // 追加选择的版本信息和价格信息
            $("#product_detail_name").html(versionNames + productPrice);
            // 最顶层价格展示
            $("#productPriceByVersion").html(productPrice);
            // 右侧价格动态展示
            $("#select_price_color").html(productPrice);
            // 总计价格展示
            $("#total_price").html('总计' + productPrice);
            $.ajax({
                // 请求数据
                url: '/product/get_product_color_by_productId_and_versionId?secondCategoryId=' + productId + '&versionId=' + versionId,
                success: function (result) {
                    $.each(result.data, function (index, item) {
                        // 拼接模块
                        var yuandain = $('<span></span>').addClass("yuandian").css('background', item.colorCode)
                        var yanse = $('<span id="y_color"></span>').addClass("yanse")
                                .append(item.colorName);
                        $("<div></div>").addClass('banben').css('float', 'left')
                                .append(yuandain)
                                .append(yanse)
                                .appendTo("#product_color");
                    });
                }
            });
        });
        // 选择颜色触发
        $("#product_color").on('click', 'div', function () {
            // 添加样式，为了选择颜色的时候版本能够正确展示
            $("#li_active").addClass('active');
            // 添加样式，为了选择颜色的时候版本能够正确展示
            $("#lunbotu_active").addClass("carousel-item active");
            // 移除同胞元素，保留事件
            $("#lunbotu").find('div[id^="chanpintupian"]').detach();
            // 移除同胞元素，保留事件
            $("#zhishifu").find('li[id^="zhishifu_li"]').detach();
            // 动态获取颜色名称， 传递条件进行查询
            version_color_name = $(this).find("#y_color").html();
            $.ajax({
                url: '/product/getImagesByColorName?secondCategoryId=' + productId + '&versionId=' + versionId + '&colorName=' + version_color_name,
                success: function (result) {
                    // 遍历数据
                    $.each(result.data, function (index, item) {
                        $("#zhishifu").append('<li id="zhishifu_li"></li>');
                        var images_host = $("<img>").addClass("product_img").attr("src", item);
                        $('<div id="chanpintupian"></div>').addClass('carousel-item').append(images_host).appendTo("#lunbotu");
                    });
                }
            })
            $(this).addClass("version_active");
            $(this).siblings().removeClass("version_active");
            $(this).find("span").addClass("font_color");
            $(this).siblings().find("span").removeClass("font_color");
            // 找到颜色
            var yanse_value = $(this).find('#y_color').html();
            $("#product_detail_color").html('');
            $("#product_detail_color").html(' ' + yanse_value);
        });

        // 添加商品到购物车
        $("#addCart").click(function () {
            // // 产品id
            // alert("产品id：" + productId);
            // // 版本
            // alert("版本id：" + versionId);
            // // 价格
            // alert("价格：" + productPrice_s);
            // // 版本颜色
            // alert("颜色：" + version_color_name);
            //
            // alert(versionNames);

            window.location.href = 'http://localhost:8080/cart/addItem?secondCategoryId=' + productId + '&productPrice=' + productPrice_s
                    + '&versionId=' + versionId + '&colorName=' + version_color_name + '&productName=' + versionNames + '&quantity='

        })


    });
</script>

</body>
</html>